<template>
    <div style="display: flex; justify-content: center; background-color: #fff; margin-bottom: 200px;">
        <div style="width: 755px">
            <div style="width: 755px;">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="ViewByProductCategory" name="first">
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
                            <div v-for="item in categoryList" key="item">
                                <div style="text-align: center;" @click="() => router.push({ path: '/en/category', query: {'id': item.id } })">
                                    <img :src="item.img" alt="" style="width: 100%; height: 180px; object-fit: cover;">
                                </div>
                                <div>
                                    <div style="font-weight: 800; font-size: 15px;">
                                        <span>{{ item.first_category.title_en }}</span>
                                        <span>-></span>
                                        <span>{{ item.title_en }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="ViewByProductName" name="second">
                        <el-table v-loading="loading" :data="productDataList" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column prop="title_en" label="title" width="240" show-overflow-tooltip />
                            <el-table-column prop="serial" label="serial" width="120" show-overflow-tooltip/>
                            <el-table-column prop="specs" label="specs" width="80" />
                            <el-table-column prop="price" label="price" width="80" />
                            <el-table-column fixed="right">
                                <template #header>
                                    <el-input v-model="searchContent" size="small" placeholder="Please enter serial or title" style="width: 140px;" @input="ProductList"/>
                                </template>
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click="() => router.push({path: '/en/detail', query: {'id': scope.row.id}})">
                                        Detail
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px;">
                            <el-pagination 
                                background 
                                :page-size="currentSize"
                                layout="prev, pager, next" 
                                :total="productTotal" 
                                @current-change="changePage" 
                                v-model:current-page="currentPage" 
                                />
                        </div>  
                    </el-tab-pane>
                    <el-tab-pane label="ViewByProductSerial" name="third">
                        <el-table v-loading="loading" :data="productDataList" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column prop="serial" label="serial" width="120" show-overflow-tooltip />
                            <el-table-column prop="title_en" label="title" width="240" show-overflow-tooltip  />
                            <el-table-column prop="specs" label="specs" width="80" />
                            <el-table-column prop="price" label="price" width="80" />
                            <el-table-column fixed="right">
                                <template #header>
                                    <el-input v-model="searchContent" size="small" placeholder="Please enter serial or title" style="width: 140px;" @input="ProductList"/>
                                </template>
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click="() => router.push({path: '/en/detail', query: {'id': scope.row.id}})">
                                        Detail
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px;">
                        <el-pagination 
                            background 
                            :page-size="currentSize"
                            layout="prev, pager, next" 
                            :total="productTotal" 
                            @current-change="changePage" 
                            v-model:current-page="currentPage" 
                            />
                        </div>   
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { listSecondCategory, listProduct } from "@/requests/index";
const router = useRouter();
const route = useRoute();
const activeName = ref('first');
const categoryList = ref();
const page = ref(1);
const size = ref(20);
const productDataList = ref();
const searchContent =ref();

const loading = ref(false);
const productTotal = ref(0);
const currentPage =  ref(1);
const currentSize = ref(25)

const ProductCategory = async()=>{
    const res = await listSecondCategory({"page": 1, "size": 10000});
    if (res.status === 2000){
        categoryList.value = res.data
    }else{
        console.log("获取分类数据失败")
    }
}

const ProductList = async()=>{
    loading.value = true;
    const res = await listProduct({"page": currentPage.value, "size": currentSize.value, "search": searchContent.value});
    if (res.status === 2000){
        productDataList.value = res.data;
        productTotal.value = res.total;
    }else{
        console.log("获取产品列表失败")
    };
    loading.value = false;
};

// 分页
const changePage = async()=>{
    loading.value = true;
    const res = await listProduct({"page": currentPage.value, "size": currentSize.value, "search": searchContent.value});
    if (res.status === 2000){
        productDataList.value = res.data;
        productTotal.value = res.total;
    }else{
        console.log("获取产品列表失败")
    };
    loading.value = false;
};

ProductList();
ProductCategory();
</script>

<style>
.el-tabs__nav-wrap {
    margin-left: 0px;
}

.el-tabs__header {
    margin-left: 0px;

}

.el-tabs__nav-scroll {
    margin-left: 0px;
}

.el-tabs__nav {
    margin-left: 60px;
    justify-content: space-between;
}

.el-tabs__item {
    font-size: 20px;
    font-weight: 800;
    margin-right: 10px;
    padding: 20px;
}

.demo-tabs>.el-tabs__content {
    /* padding: 10px; */
    color: #6b778c;
    font-size: 15px;
    font-weight: 600;
}

.el-table th,
.el-table td {
    font-size: 15px;
}


</style>ss